<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>乐热评-因为热爱所以快乐</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="css/global.css">
    <style>
        .laytable-cell-1-id {
            width: 120px;
        }

        .laytable-cell-1- * {
            width: 237px;
        }
    </style>
</head>
<body class="mbg">

<!-- 你的HTML代码 -->
<div class="layui-header header header-doc ">
    <div class="layui-main pbg">
        <a class="logo" href="./index.html"><img src="img/logo.png"/>
        </a>
        <ul class="layui-nav layui-layout-left" lay-filter="">
            <li class="layui-nav-item "><a href="./index.html">首页</a></li>
            <li class="layui-nav-item layui-this"><a href="./search.html">搜索</a></li>

            <li class="layui-nav-item"><a href="./event.html">动态</a></li>
            <li class="layui-nav-item layui-layout-right">
            </li>
        </ul>
    </div>

    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</div>


<div class="layui-main pbg">


    <div class="layui-row">
        <div class="layui-col-md9">
            <div class="layui-form-item search" action="">
                <div class="layui-col-md-offset3">
                    <input type="text" id="content" required lay-verify="required" placeholder="请输入搜索内容"
                           autocomplete="off"
                           class="layui-input inline shade">
                    <span class="j-flag" style="display:none;">&nbsp;</span>
                    <button href="javascript:void(0)" class="layui-btn layui-btn-normal inline shade" title="搜索">搜索
                    </button>
                </div>
            </div>
            <div id="m-search">
                <div class="ws14 layui-hide">搜索""，找到 <em class="word_tip">306</em>条评论
                </div>

                <div class="layui-tab">
                    <ul class="layui-tab-title tab">
                        <li lay-id="222" class="layui-this"><a href="javascript:void(0)" class="z-slt"><em>评论</em></a>
                        </li>
                        <li lay-id="100"><a hidefocus="true" href="javascript:void(0)"><em>歌曲</em></a></li>
                        <li lay-id="10"><a hidefocus="true" href="javascript:void(0)"><em>歌手</em></a></li>
                        <li lay-id="1014"><a hidefocus="true" href="javascript:void(0)"><em>用户</em></a></li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <table class="layui-table"
                                   lay-data="{id:'comment',limit:10,skin:'line',page:{groups:4,curr:0,hash:'offset',layout: ['prev', 'page', 'next']}}">
                                <thead>
                                <tr>
                                    <th lay-data="{field:'cid', width: 120}">ID</th>
                                    <th lay-data="{field:'user',templet: '<div>{{d.sendUser.nickname}}</div>', width: 120}">
                                        用户名
                                    </th>
                                    <th lay-data="{field:'ctime', width: 120}">时间</th>
                                    <th lay-data="{field:'content'}">内容</th>
                                </tr>
                                </thead>
                            </table>
                        </div>
                        <div class="layui-tab-item">
                            <table class="layui-table"
                                   lay-data="{id:'songs',limit:10,skin:'line',page:{groups:4,curr:0,hash:'offset',layout: ['prev', 'page', 'next']}}">
                                <thead>
                                <tr>
                                    <th lay-data="{field:'sid', width: 120}">ID</th>
                                    <th lay-data="{field:'name', width: 120}">歌名</th>
                                    <th lay-data="{field:'singer',templet: '<div>{{d.singer.name}}</div>', width: 120}">
                                        歌手
                                    </th>
                                    <th lay-data="{field:'link', width: 120,templet: '<div><a target=\'_blank\' href =\'{{d.link}}\'><i class=\'layui-icon\'>&#xe652;</i></a></div>'}">
                                        收听
                                    </th>
                                    <th lay-data="{field:'source',templet: '<div>{{d.source.name}}</div>'}">来源</th>
                                </tr>
                                </thead>
                            </table>
                        </div>
                        <div class="layui-tab-item">
                            <table class="layui-table"
                                   lay-data="{id:'artist',limit:10,skin:'line',page:{groups:4,curr:0,hash:'offset',layout: ['prev', 'page', 'next']}}">
                                <thead>
                                <tr>
                                    <th lay-data="{field:'sid', width: 120}">ID</th>
                                    <th lay-data="{field:'name', width: 120}">昵称</th>
                                    <th lay-data="{field:'brief'}">介绍</th>
                                </tr>
                                </thead>
                            </table>
                        </div>
                        <div class="layui-tab-item">
                            <table class="layui-table"
                                   lay-data="{id:'user',limit:10,skin:'line',page:{groups:4,curr:0,hash:'offset',layout: ['prev', 'page', 'next']}}">
                                <thead>
                                <tr>
                                    <th lay-data="{field:'uid', width: 120}">ID</th>
                                    <th lay-data="{field:'nickname', width: 120,templet: '<div><a target=\'_blank\' href=\'../user/user.html?id={{d.uid}}\'>{{d.nickname}}</a></div>'}">用户名</th>
                                    <th lay-data="{field:'city', width: 120}">地区</th>
                                    <th lay-data="{field:'introduce'}">介绍</th>
                                </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md3">
            <div class="layui-box ">
                <div class="ws18 up189">活动</div>
                <hr>
                <ul>
                    <div class=" announcement">
                        <li><a>活动1..............</a></li>
                        <li><a>活动2..............</a></li>
                        <li><a>活动3..............</a></li>
                    </div>
                </ul>
                <hr>
            </div>
            <div class="layui-box">
                <div class="ws18">附近</div>
                <hr>
                <ul class="nearby"></ul>
                <hr>
            </div>
        </div>
    </div>
    <div class="footer">
        &copy;Copyright 2018 乐热评<br>
        感谢：<a>Layui</a>,<a>Bootstrap</a>,<a>网易云</a>,<a>QQ音乐</a>,<a>酷我音乐</a>...<br>
        联系我们：<a href="mailto:amoxuk@aliyun.com">amoxuk#aliyun.com(#换成@)</a>
    </div>
</div>
<script src="js/jquery-1.12.0.min.js"></script>
<script src="js/jquery.session.js"></script>
<script src="layui/layui.js"></script>
<script src="js/top.js"></script>
<script>
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use(['element', 'table', 'laypage'], function () {
        var element = layui.element;
        var table = layui.table;
    });
    layui.use('jquery', function () {
        var $ = layui.jquery;
        $('.layui-btn-normal').on('click', function () {
            var key = $('#content').val();
            var type = $('.layui-tab-title.tab>li.layui-this').attr("lay-id");
            console.log(key + '---' + type);
            if (!key) {
                layer.msg("请输入搜索内容");
                return false;
            }
            search(key, type);
        });
        $('.layui-tab-title.tab>li').on('click', function () {
            var key = $('#content').val();
            var type = $(this).attr("lay-id");
            if (key) {
                console.log(key + '---' + type);
                search(key, type);
            }
        });

        function search(key, type) {
            var table = layui.table;
            var param = {
                url: '/search/' + type + '/' + key
                , request: {pageName: 'offset'}
                , page: {groups: 4, curr: 0, hash: 'offset', layout: ['prev', 'page', 'next']}
                , response: {
                    statusName: 'status' //数据状态的字段名称，默认：code
                }
            };
            switch (type) {
                case '222':/*评论*/
                    table.reload('comment', param);
                    break;
                case '100':/*歌曲*/
                    table.reload('songs', param);
                    break;
                case '10':/*歌手*/
                    table.reload('artist', param);
                    break;
                case '1014':/*用户*/
                    table.reload('user', param);
                    break;
                default :
                    layer.msg("类型错误");
                    break;
            }
        }
    });
</script>
<script type="text/javascript" src="js/nearby.js"></script>
</body>
</html>